<template>
<block>
<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，项目使用请保留此说明
-->
<view class="flex bg-white radius text-white main" v-if="couponUserInfo.type == '1'">
  <view class="flex-twice padding-sm radius t1-r">
    <view class="flex">
      <view class="flex-sub text-xxl text-bold text-price overflow-1">{{couponUserInfo.reduceAmount}}</view>
      <view class="flex-twice">
        <view class="text-sm overflow-1">{{couponUserInfo.name}}</view>
        <view class="text-xs overflow-1">订单满{{couponUserInfo.premiseAmount}}元可使用</view>
        <view class="text-xs">
          {{couponUserInfo.suitType == '1' ? '全部商品可用' : couponUserInfo.suitType == '2' ? '指定商品可用' : couponUserInfo.suitType == '3' ? '指定商品不可用' : ''}}
        </view>
      </view>
    </view>
    <view class="text-xs">有效期至{{couponUserInfo.validEndTime}}</view>
  </view>
  <view class="flex-sub padding-sm radius text-center t1-l">
    <view class="padding-sm">代金券</view>
    <navigator hover-class="none" :url="'/pages/goods/goods-list/index?couponUserId='+(couponUserInfo.id)" class="cu-btn bg-white sm" v-if="toUse && couponUserInfo.status == '0'">前去使用</navigator>
    <view class="padding-xs" v-if="couponUserInfo.status == '1'">已使用</view>
    <view class="padding-xs" v-if="couponUserInfo.status == '2'">已过期</view>
  </view>
</view>
<view class="flex bg-white radius text-white main" v-if="couponUserInfo.type == '2'">
  <view class="flex-twice padding-sm radius t2-r">
    <view class="flex">
      <view class="flex-sub text-xxl text-bold overflow-1">{{couponUserInfo.discount}}<text class="text-sm">折</text></view>
      <view class="flex-twice">
        <view class="text-sm overflow-1">{{couponUserInfo.name}}</view>
        <view class="text-xs overflow-1">订单满{{couponUserInfo.premiseAmount}}元可使用</view>
        <view class="text-xs">
          {{couponUserInfo.suitType == '1' ? '全部商品可用' : couponUserInfo.suitType == '2' ? '指定商品可用' : couponUserInfo.suitType == '3' ? '指定商品不可用' : ''}}
        </view>
      </view>
    </view>
    <view class="text-xs">有效期至{{couponUserInfo.validEndTime}}</view>
  </view>
  <view class="flex-sub padding-sm radius text-center t2-l">
    <view class="padding-sm">折扣券</view>
    <navigator hover-class="none" :url="'/pages/goods/goods-list/index?couponUserId='+(couponUserInfo.id)" class="cu-btn bg-white sm" v-if="toUse && couponUserInfo.status == '0'">前去使用</navigator>
    <view class="padding-xs" v-if="couponUserInfo.status == '1'">已使用</view>
    <view class="padding-xs" v-if="couponUserInfo.status == '2'">已过期</view>
  </view>
</view>
</block>
</template>

<script>
/**
 * Copyright (C) 2018-2019
 * All rights reserved, Designed By www.joolun.com
 * 注意：
 * 本软件为www.joolun.com开发研制，项目使用请保留此说明
 */
const app = getApp();
export default {data() {
return {};
}, 
props: {
  couponUserInfo: {
    type: Object,
    default: () => ({})
  },
  toUse: {
    type: Boolean,
    default: true
  }
}, 
methods: {}};
</script>
<style >

.main{
  height: 160rpx
}
.t1-r{
  background: radial-gradient(circle at top right, transparent 5px, #f37b1d 0) top right, radial-gradient(circle at bottom right, transparent 5px, #f37b1d 0) bottom right;
  background-size: 100% 60%;
  background-repeat: no-repeat;
}
.t1-l{
  background: radial-gradient(circle at top left, transparent 5px, #f37b1d 0) top left,radial-gradient(circle at bottom left, transparent 5px, #f37b1d 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  border-left: 2rpx dashed rgba(255,255,255,.3);
}
.t2-r{
  background: radial-gradient(circle at top right, transparent 5px, #39b54a 0) top right, radial-gradient(circle at bottom right, transparent 5px, #39b54a 0) bottom right;
  background-size: 100% 60%;
  background-repeat: no-repeat;
}
.t2-l{
  background: radial-gradient(circle at top left, transparent 5px, #39b54a 0) top left,radial-gradient(circle at bottom left, transparent 5px, #39b54a 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  border-left: 2rpx dashed rgba(255,255,255,.3);
}
</style>